<template>
	<view>
		<!-- <cu-custom bgColor="bg-white">
			<block slot="content">商家版</block>
		</cu-custom> -->
		<!-- <u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page> -->
		<!-- 主页 -->
		<view class="layout">
			<view class="viewbox" style="background-color: #fff;"></view>
			<img class="group1" src="../../static/bg.png" />
				<!--此处插入蓝色背景图-->
				<!-- <image src="../../static/pageone.png"></image> -->
			<!-- </view> -->
			<!-- 没登录时 -->
			<!-- <view class="login-box" v-if="!isLogin" @click="goToWxLogin()"> -->
			<!-- 里面的文字 -->
			<!-- <view class="login-zi"> -->
			<!-- 		登录
				</view>
			</view> -->
			<!-- 登录时 -->
			<view class="informationbx">
				<view class="welcomebox-avatar">
					<image :src="avatar_logo"></image>
				</view>
				<view class="welcomebox-login" v-if="!isLogin" @click="goToWxLogin()">登录</view>
				<view class="welcomebox" v-if="isLogin">{{ cname }}</view>
			</view>

			<!-- 下面 -->

			<!-- <view class="listbox" @click="navigate('/pages/detail/detail',1)" v-if="isLogin"> -->
			<!-- 金额人数 -->
			<view class="group3">
				<!--此处为会员余额和积分-->
				<view class="p1" @click="navigate('/pages/balance/balance')">
					<view class="parse1">
						<view class="text1">扫码总积分</view>
						<view class="text2">￥<text>{{total_amount}}</text></view>
					</view>
					<image style=" height: 70rpx; width: 70rpx; position: absolute; margin: 47rpx 0 0 280rpx;"
						src="../../static/vipicon.png"></image>
				</view>
			
				<image class="image3" src="../../static/lineshu.png"></image>
			
				<view class="p2" @click="navigate('/pages/integral/integral')">
					<view class="parse1">
						<view class="text1">扫码总人数</view>
						<view class="text2"><text>{{user_count}}</text></view>
					</view>
					<image style=" height: 70rpx; width: 70rpx; position: absolute; margin: 47rpx 0 0 250rpx;" src="../../static/intg.png">
					</image>
				</view>
			</view>
			


			<!-- 左边右边 -->
			<view class="sacnboxlist">
				<view class="sacnbox" @click="scan">
					<view class="scan-title">扫码核销</view>
					<view class="scan-dec">点击进行核销</view>
					<view class="scan-icon">
						<image src="../../static/icon1.png" mode=""></image>
					</view>
				</view>

				<view class="listbox" @click="navigate('/pages/detail/detail',1)">
					<view class="scan-title">扫码记录</view>
					<view class="scan-dec">点击查看记录</view>
					<view class="scan-icon">
						<image src="../../static/icon3.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 扫码页面 -->

		</view>
	</view>
</template>

<script>
	import api from '../../common/apiService';
	import request from '../../common/request';
	// const {
	// 	getBanner,
	// 	getRecommendList,
	// 	getUserIntegral
	// } = api;



	export default {
		data() {
			return {
				showLoading: true,
				isLogin: true,
				cname: '',
				result: '',
				avatar_logo:request.baseUrl+'img/avatar.png',
				total_amount:0,
				user_count:0
			}
		},
		onLoad() {
			this.loginfo()
		},
		mounted() {
			const mid = uni.getStorageSync('mid');
			const cname = uni.getStorageSync('name')
			this.cname = cname
			console.log("name值", cname)

			console.log("mid是", mid)
			if (mid) {
				this.isLogin = true;
			} else {
				this.isLogin = false;
			}
		},

		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/wxrole'
						})
					}, 100)
					return;
				}
				uni.navigateTo({
					url
				});
			},
			goToWxLogin() {
				uni.navigateTo({
					url: '/pages/auth/wxrole'
				});
			},
			loginfo() {
				const _this = this;
				const mid = uni.getStorageSync('mid');
				uni.request({
					url:request.baseUrl + 'm-ScanLogList?mid='+mid,
					method:'GET',
					success(res) {
						console.log("记录",res)
						_this.total_amount = res.data.data.total_amount
						_this.user_count = res.data.data.user_count
					}
				})
			},
			// 扫码
			scan() {
				const _this = this
				const mid = uni.getStorageSync('mid');
				if( mid==='' ){
					uni.redirectTo({
						url:'/pages/auth/wxrole'
					})
				}else{
					uni.scanCode({
						success: function(res) {
							// console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
							this.result = res.result.slice(1).split('&')
							console.log("扫码结果", this.result)
							uni.setStorageSync('uid', this.result[0])
							uni.setStorageSync('id', this.result[1])
							// const id = result[0];
							// const selffetch_shop_id = result[1];
							let uid = uni.getStorageSync('uid')
							let id = uni.getStorageSync('id')
							console.log("uid传递获取",uid)
							console.log("id传递获取",id)
							if(uid!==''){
								uni.navigateTo({
									url: '/pages/scanpage/scanpage'
								})
							}else{
								console.log("没跳")
							}
							// _this.sureorder(selffetch_shop_id, id)
						}
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	view {
		font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
	}
	.layout {
		position: relative;
		width: 100%;
		height: 100vh;
		/* 使容器占满整个视口高度 */
		
	.group1 {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		/* 使图片覆盖整个容器 */
		position: absolute;
		/* 使图片绝对定位 */
		top: 0;
		left: 0;
		z-index: -1;
		/* 将图片放在文字后面 */
		// image {
		// 	width: 100%;
		// 	height: 485rpx;
		// 	position: fixed;
		// 	z-index: -1;
		// }
	}

	// 注册登录
	// .login-box {
	// 	width: 400rpx;
	// 	height: 73rpx;
	// 	background: #ffffff;
	// 	position: absolute;
	// 	margin: 250rpx 165rpx 46rpx 174rpx;
	// 	border-radius: 40rpx;

	// 	.login-zi {
	// 		width: 150rpx;
	// 		height: 28rpx;
	// 		// border: 1px solid red;
	// 		font-size: 30rpx;
	// 		line-height: 28rpx;
	// 		color: #004097;
	// 		margin: 22rpx 133rpx 23rpx 174rpx;
	// 		font-weight: 500;
	// 	}
	// }

	.informationbx {
		width: 710rpx;
		height: 250rpx;
		margin: 150rpx 20rpx 0 20rpx;
		// border: 1px solid #ffffff;
		border-radius: 30rpx;
		position: absolute;
		// background: rgba(255, 255, 255, 1);
		// box-sizing: border-box;
		// padding: 100rpx 0 0 200rpx;
		color: #000000;
		font-size: 35rpx;

		.welcomebox-avatar {
			width: 150rpx;
			height: 150rpx;
			line-height: 150rpx;
			border-radius: 50%;
			border: 2rpx solid #ffffff;
			// float: right;
			margin: 75rpx 0 0 50rpx;
			position: absolute;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.welcomebox {
			margin: 130rpx 0 0 250rpx;
			color: #ffffff;
		}

		.welcomebox-login {
			width: 400rpx;
			height: 200rpx;
			line-height: 200rpx;
			// border: 1px solid red;
			margin: 50rpx 0 0 230rpx;
			color: #ffffff;
			// background: #f4f4f4;
		}
	}
	
	// 中间
	.group3 {
		width: 710rpx;
		height: 170rpx;
		border-radius: 20rpx;
		background-color: #f6f6f6;
		// margin-left: 20rpx;
		// margin-top: 108rpx;
		margin: 430rpx 20rpx 0 20rpx;
		z-index: 10;
		display: flex;
		position: absolute;
	
		.p1 {
			display: flex;
	
			.parse1 {
				.text1 {
					font-size: 22rpx;
					padding-top: 46rpx;
					padding-left: 28rpx;
	
				}
	
				.text2 {
					font-size: 22rpx;
					color: #ff8400;
					padding-left: 28rpx;
					padding-top: 10rpx;
	
					text {
						font-size: 48rpx;
						color: #ff8400;
					}
				}
			}
	
			.img1 {
				position: absolute;
				margin-left: 280rpx;
				width: 70rpx;
				height: 70rpx;
				padding-top: 47rpx;
	
			}
		}
	
		.image3 {
			position: absolute;
			margin-left: 370rpx;
			background-color: #bfbfbf;
			width: 1rpx;
			height: 107rpx;
			margin-top: 28rpx;
	
		}
	
		.p2 {
			display: flex;
			position: absolute;
			margin-left: 370rpx;
	
			.parse1 {
	
				.text1 {
					font-size: 22rpx;
					padding-top: 46rpx;
					padding-left: 28rpx;
	
				}
	
				.text2 {
					font-size: 22rpx;
					color: #ff8400;
					padding-left: 28rpx;
					padding-top: 10rpx;
	
					text {
						font-size: 48rpx;
						color: #ff8400;
					}
				}
			}
	
			.img1 {
				position: absolute;
				margin-left: 200rpx;
				width: 70rpx;
				height: 70rpx;
				padding-top: 47rpx;
	
			}
		}
	
	}
	

	.sacnboxlist {

		width: 710rpx;
		height: 400rpx;
		// border: 1px solid red;
		border-radius: 30rpx;
		// background: #efefef;
		margin: 590rpx 20rpx 0 20rpx;
		position: absolute;
		display: flex;

		// 扫码
		.sacnbox {
			margin: 40rpx 0 0 0;
			width: 330rpx;
			height: 280rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx;
			// transform: translateX(-50%);
			// animation: float 3s ease-in-out infinite;

			.scan-title {
				width: 220rpx;
				height: 28rpx;
				line-height: 28rpx;
				// position: absolute;
				color: #000000;
				// border: 1px solid red;
				font-size: 30rpx;
				// margin: 43rpx 0 0 93rpx;
				padding: 43rpx 0 0 30rpx;
			}
			.scan-dec {
				width: 220rpx;
				height: 19rpx;
				// border: 1px solid red;
				color: #666666;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 19rpx;
				padding: 55rpx 0 0 32rpx;
			}

			// 图标
			.scan-icon {
				width: 80rpx;
				height: 80rpx;
				// border: 1px solid red;
				// padding: 45rpx 0 0 33rpx;
				position: absolute;
				margin: 50rpx 0 0 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.listbox {
			// border: 1px solid red;
			position: absolute;
			width: 330rpx;
			height: 280rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx;
			margin: 40rpx 0 0 380rpx;

			.scan-title {
				width: 220rpx;
				height: 28rpx;
				line-height: 28rpx;
				// position: absolute;
				color: #000000;
				// border: 1px solid red;
				font-size: 30rpx;
				// margin: 43rpx 0 0 93rpx;
				padding: 43rpx 0 0 30rpx;
			}
			.scan-dec {
				width: 220rpx;
				height: 19rpx;
				// border: 1px solid red;
				color: #666666;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 19rpx;
				padding: 55rpx 0 0 32rpx;
			}

			.scan-icon {
				width: 100rpx;
				height: 83rpx;
				line-height: 93rpx;
				// border: 1px solid red;
				// padding: 45rpx 0 0 33rpx;
				position: absolute;
				margin: 50rpx 0 0 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}



	}


	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-30rpx);
		}
	}
}
</style>